<template>
	<div id="test" class="test">
	</div>
</template>

<script>
	import $ from 'jquery'
	import echarts from 'echarts'
	export default {
		name: 'test',
		data() {
			return {}
		},
		components: {},
		computed: {},
		methods: {
			getData: function() {
				var myChart = echarts.init(document.getElementById('test'));
				// 指定图表的配置项和数据
				var data1 = [];
				var data2 = [];
				var data3 = [];

				var random = function(max) {
					return(Math.random() * max).toFixed(3);
				};

				for(var i = 0; i < 500; i++) {
					data1.push([random(15), random(10), random(1)]);
					data2.push([random(10), random(10), random(1)]);
					data3.push([random(15), random(10), random(1)]);
				}

				var option = {
					animation: false,
					legend: {
						textStyle: {
							color: 'white'
						},
						data: ['scatter', 'scatter2', 'scatter3']
					},
					tooltip: {},
					textStyle: {
						color: 'white'
					},
					xAxis: {
						type: 'value',
						min: 'dataMin',
						max: 'dataMax',
						splitLine: {
							show: true
						}
					},
					yAxis: {
						type: 'value',
						min: 'dataMin',
						max: 'dataMax',
						splitLine: {
							show: true
						}
					},
					dataZoom: [{
							type: 'slider',
							show: true,
							xAxisIndex: [0],
							start: 1,
							end: 35
						},
						{
							type: 'slider',
							show: true,
							yAxisIndex: [0],
							left: '93%',
							start: 29,
							end: 36
						},
						{
							type: 'inside',
							xAxisIndex: [0],
							start: 1,
							end: 35
						},
						{
							type: 'inside',
							yAxisIndex: [0],
							start: 29,
							end: 36
						}
					],
					series: [{
							name: 'scatter',
							type: 'scatter',
							itemStyle: {
								normal: {
									opacity: 0.8
								}
							},
							symbolSize: function(val) {
								return val[2] * 40;
							},
							data: data1
						},
						{
							name: 'scatter2',
							type: 'scatter',
							itemStyle: {
								normal: {
									opacity: 0.8
								}
							},
							symbolSize: function(val) {
								return val[2] * 40;
							},
							data: data2
						},
						{
							name: 'scatter3',
							type: 'scatter',
							itemStyle: {
								normal: {
									opacity: 0.8,
								}
							},
							symbolSize: function(val) {
								return val[2] * 40;
							},
							data: data3
						}
					]
				}
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				console.log(option)
			}
		},
		mounted: function() {
			this.getData()
		}
	}
</script>

<style>
	.test {
		width: 100%;
		height: 100%;
		/*background: red;*/
	}
</style>